<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="iconfont/iconfont.css">
	<style type="text/css"> 
		html,body{
			width: 100%;
			height: 100%;
			margin:0px;
			padding:0px;
			background:#FFFFFF;
			/* background:blue; */
		}
		
		.mui-content{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items:center;
			justify-content: center;
			background:#FFFFFF;
			
		}
		
		
		.login-content{
			margin-top: 20%;
			width: 80%;
			text-align: center;
		}
		.login-title{
			display: flex;
			align-items:center;
			padding-bottom: 35px;
		}
		
		.login-title img {
			height: 40px;
			width: 40px;
		}
		.login-title div {
			font-size: 20px;
			font-weight: bold;
			padding-left: 5px;
		}
		.login-addr {
			/* padding-top: 20px; */
			font-size: 14px;
			color: gray;
			position: absolute;
			bottom:0px;
			padding-bottom: 10px;
		}
		
		.loginBtn{
			width: 100%;
			height: 48px;
			margin-top: 20px;
			background-color: #6AA2E0;
			color: white;
			letter-spacing: 5px;
			font-size: 16px;
			cursor: pointer;
			border: none;
		}
		.loginBtn:hover{
			opacity: 0.8;
		}
		.mui-btn-link{
			font-size:12px;
			color: #1D5494;
		}
		.left-top-sign{
			font-size: 40px;
			color: #f8f8f8;
			position:relative;
			left: 10px;
			top: 35px;
		}
		.welcome{
			position:relative;
			left: 0px;
			top: 0px;
			font-size: 26px;
			color: #555;
			text-shadow: 1px 0px 1px rgba(0,0,0,.3);
		}
		[v-cloak] {
			display: none;
		}
	 
	</style>
</head>
<body>
	<div id="App" v-cloak>
		<div class="mui-content">
			<div class="left-top-sign">LOGIN</div>
			<div class="welcome">
				登录
			</div>
			<div class="login-content">
				<div class="login-title">
					<img id="img" src="img/logo.png"/ mode>
					<div id="login-des">
						智能运维
					</div>
				</div>
				<div class="login-input">
					<div class="mui-input-row">
						<input type="text" placeholder="请输入账号" v-model="userName" />
					</div>
					<div class="mui-input-row">
						<input type="password" class="mui-input-password" placeholder="请输入密码" v-model="passWord" />
					</div>
					<button type="button" class="loginBtn" @click="login">登录</button>					
				</div>
				
			</div>
			<div class="login-addr" @click="getaddr">
				后台地址配置
			</div>
		</div>
		
	</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.md5.js"></script>
<script src="js/common.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/nv-bar.js"></script>
<script type="text/javascript">
	
	var mv = new Vue({
		el:"#App",
		data:{
			userName:"",
			passWord:""
		},
		methods: {
			login:function(){
				var userName = this.userName;
				var passWord = this.passWord;
				if( userName == ""||passWord == "") {
					plus.ui.toast("用户名或密码不能为空！");
					return;
				}
				services.login(this.userName,$.md5(passWord)).then((data)=>{
					console.log(JSON.stringify(data))
					if(data.flag == true || data.flag =="true"){
						
						//存储密码到本地
						localStorage.setItem(constValue.autoLogin,"true");
						localStorage.setItem(constValue.userName,userName);
						localStorage.setItem(constValue.passWord,passWord);
						localStorage.setItem(constValue.token, data.token);
						var obj = JSON.stringify(data.accountDetail)
						localStorage.setItem(constValue.accountDetail, obj);				
						var options = {
							styles:{
								subNViews:__nvbar__.subNViews
							},
							waiting:{
									autoShow:false,//自动显示等待框，默认为true
							},
							extras:{}
						};
						mui.openWindow("index-native.html","index-native.html",options);
						
										
					}else { 
						localStorage.setItem(constValue.autoLogin,"false");
						mui.toast("请检查网络状态，用户名和密码是否错误！");
					}
				}).catch((e)=>{
					console.log(e.status)
					mui.toast("请检查网络状态，用户名和密码是否错误！");
				});

			
			},
			getaddr:function(){
				mui.openWindow({
					url:"pre-login.html",
					id:"pre-login.html"
				})
			}
		},
		mounted:function(){ 
			mui.init();
			mui.back = function(){}
			that = this;
			mui.plusReady(function () {
			    plus.navigator.setStatusBarStyle('dark');
			    plus.navigator.setStatusBarBackground('#fff');
				var userName = localStorage.getItem(constValue.userName);
				if(userName){
					that.userName = userName;
				}
			})
			
		}
	})	
	
</script>

</html>